<template>
  <div class="forgetp1">
    <vheader pageTitle="找回密码"></vheader>
    <ul>
      <li>
        <span class="icon-user"></span>
        <input type="number" placeholder="手机号码" v-model="phoneNum">
      </li>
    </ul>
    <div class="forgetp1-btn">
      <vbutton 
        text="下一步"
        :loading="loading"
        @click="nextStep"></vbutton>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import vbutton from 'components/common/button'
  import { Toast } from 'mint-ui'
  import { isPhoneNum } from '@/tool/check.js'

  export default {
    data () {
      return {
        loading: false,
        phoneNum: ''
      }
    },
    methods: {
      nextStep () {
        if (!isPhoneNum(this.phoneNum)) {
          Toast('请输入正确的手机号码')
          return
        }
        this.$router.push(`/forgetPasswordStep2/${this.phoneNum}`)
      }
    },
    components: {
      vheader,
      vbutton
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';
  .forgetp1 {
    width: 100%;
    height: 100%;
    background: url('../../assets/forget_bg@2x.png') 0 0 no-repeat;
    background-size: cover;
    .icon-user {
      color: #999;
    }
    ul {
      margin-top: 74px;
      padding: 0 30px;
      font-size: 30px;
      li {
        padding: 0 30px;
        display: flex;
        align-items: center;
        height: 92px;
        border-bottom: 1px solid $base-e5e5e5;
      }
      input {
        flex: 1;
        outline: none;
        margin-left: 20px;
        background: transparent;
      }
    }
    &-btn {
      text-align: center;
      font-size: 0;
      margin-top: 100px;
    }
  }
</style>
